/**
* Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
* All Rights Reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are NOT permitted except as agreed by
* iAuto (Shanghai) Co., Ltd.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*/


// 服务－状态记录
import React from 'react';
import {
    Button,
    Space,
} from 'antd';
import { anyObj } from '@/types/components'
import { recordsProps } from '@/types/soaManage'
import ExpandTable from '@/components/common/ExpandTable'
import ServelistChildDrawer from './ServelistChildDrawer'
import ServiceDetailsDrawer from './ServiceDetailsDrawer'
import style from './index.less';
import { emptyText } from '@/pages/soaManage/abilitymanagement/utils';
// isChange-isDelete-isNew
const rowHeaderIcon = {
    'style-false': {
        text: '',
        style: {
            color: '#000'
        }
    },
    'style-isChange': {
        text: '变',
        style: {
            color: '#ff7918'
        }
    },
    'style-isDelete': {
        text: '删',
        style: {
            color: '#9fa0a2'
        }
    },
    'style-isNew': {
        text: '新',
        style: {
            color: '#00a870'
        }
    },
}
const iconTextStyle = {
    color: '#fff',
    display: 'inline-block',
    fontSize: '12px',
    padding: '2px 5px',
    borderRadius: '5px'
}
export default (props: recordsProps | any) => {
    const {
        activeKey = 2,
        // 分页
        pagination = {},
        // 车型车系ｍａｐ
        carMap = {},
        // 服务列表数据
        dataSource = [],
    } = props
    // 服务列表item
    const [serveItem, setServeItem] = React.useState<any>({});
    const [serveItemDrawer, setServeItemDrawer] = React.useState(false);
    const [servelistchild, setServelistchild] = React.useState<any>({});
    const [servelistchildDrawer, setServelistchildDrawer] = React.useState(false);
    // table 表头
    const columns: anyObj[] = React.useMemo(
        () => [
            {
                title: '',
                dataIndex: 'isNew',
                key: 'isNew',
                align: 'right',
                width: '40px',
                render: (_: any, item: any) => {
                    return (
                        item.isDelete || item.isNew || item.isChange ? <span style={{
                            ...iconTextStyle,
                            backgroundColor: rowHeaderIcon[`style-${item.isDelete ? 'isDelete' : item.isNew ? 'isNew' : item.isChange ? 'isChange' : 'false'}`]?.style?.color,
                        }}>
                            {rowHeaderIcon[`style-${item.isDelete ? 'isDelete' : item.isNew ? 'isNew' : item.isChange ? 'isChange' : 'false'}`]?.text}
                        </span> : null
                    );
                },
            },
            {
                title: '服务ID',
                width: '220px',
                key: 'serviceId',
                dataIndex: 'serviceId',
            },
            {
                title: '服务名称 ',
                width: '240px',
                key: 'sName',
                dataIndex: 'sName',
            },
            {
                title: '品牌',
                dataIndex: 'brand',
                key: 'brand',
                width: '140px',
            },
            {
                title: '车系',
                dataIndex: 'sCode',
                key: 'sCode',
                width: '100px',
                render: (sCode: any) => {
                    return <span>{carMap[sCode]?.seriesName || ''}</span>;
                },
            },
            {
                title: '车型',
                dataIndex: 'mCode',
                key: 'mCode',
                render: (mCode: string, item: any) => {
                    return <span>{carMap[item?.sCode]?.models[mCode]?.modelName || ''}</span>;
                },
            },
            {
                title: '服务矩阵版本号',
                dataIndex: 'socVersion',
                key: 'socVersion',
            },
            {
                title: '导入人员账号',
                width: '140px',
                dataIndex: 'handleUser',
                key: 'handleUser',
            },
            {
                title: '导入时间',
                width: '140px',
                dataIndex: 'handleTime',
                key: 'handleTime',
                render: (item: string) => item ? item.replace('T', ' ') : ''
            },
            {
                title: '操作',
                key: 'action',
                align: 'center',
                fixed: 'right',
                width: '100px',
                render: (_: any, record: any) => (
                    <Space size="middle">
                        {
                            !record.isDelete && <Button
                            type="link"
                            //  className={classNames(styles.antBtn)}
                            onClick={
                                () => {
                                    setServeItem(record)
                                    setServeItemDrawer(true);
                                }
                            }
                        >
                            查看
                        </Button>
                        }
                    </Space>
                ),
            },
        ], [carMap])
    //table child 表头
    const childColumns: anyObj[] = React.useMemo(
        () => [
            {
                title: '',
                dataIndex: 'isNew',
                key: 'isNew',
                align: 'right',
                width: '40px',
                render: () => '',
            },
            {
                title: '服务接口元素名称',
                width: '200px',
                key: 'mName',
                dataIndex: 'mName',
            },
            {
                title: '服务接口元素描述',
                width: '200px',
                dataIndex: 'description',
                key: 'description',
            },
            {
                title: '服务接口元素标识符',
                dataIndex: 'functionId',
                key: 'functionId',
                // width: '240px',
            },
            {
                title: '',
                key: 'action',
                align: 'center',
                fixed:'right',
                width: '100px',
                render: (_: any, record: any) => (
                    <Space size="middle">
                        {
                            !record.isDelete && <Button
                            type="link"
                            //  className={classNames(styles.antBtn)}
                            onClick={
                                () => {
                                    setServelistchild(record)
                                    setServelistchildDrawer(true);
                                }
                            }
                        >
                            查看
                        </Button>
                        }
                    </Space>
                ),
            },
        ], [])
    {/* table */ }
    const domExpandTable = React.useMemo(
        () =>
            <ExpandTable
                dataSource={dataSource}
                columns={columns}
                rowKey={'serviceVerId'}
                laoding={false}
                childColumns={childColumns}
                pagination={pagination}
                tableProps={{
                    rowClassName: (record: any) => `style-${record.isDelete ? 'isDelete' : record.isNew ? 'isNew' : record.isChange ? 'isChange' : 'false'}`
                }}
                // ifExpand={ifExpand}
                childDataKey={'methods'}
                childDataRowKey={'methodVerId'}>
            </ExpandTable>,
        [dataSource, columns, childColumns, pagination]
    )
    {/* 详情查看抽屉弹窗 */ }
    const domServiceDetailsDrawer = React.useMemo(
        () => <ServiceDetailsDrawer
            itemRow={serveItem}
            itemRowDrawer={serveItemDrawer}
            carMap={carMap}
            setItemRowDrawer={setServeItemDrawer}>
        </ServiceDetailsDrawer>,
        [serveItem, serveItemDrawer, carMap]
    )
    {/* 接口查看元素查看弹窗 */ }
    const domServelistChildDrawer = React.useMemo(
        () => <ServelistChildDrawer
            itemRow={servelistchild}
            itemRowDrawer={servelistchildDrawer}
            setItemRowDrawer={setServelistchildDrawer}>
        </ServelistChildDrawer>,
        [servelistchild, servelistchildDrawer]
    )
    return (
        <div className={style.UnpublishedService} key={2} style={{
            display: activeKey == 2 ? 'block' : 'none'
        }}>
            {
                dataSource && dataSource.length ?
                    domExpandTable : emptyText(0, '服务')
            }
            {domServiceDetailsDrawer}
            {domServelistChildDrawer}
        </div>
    )
}